<template>
	<view class="body">
		<navbar name="记录运动"></navbar>
		<view class="searchView">
			<u-search placeholder-color="#BFBEC3"
			v-model="keyword"
			:clearabled="true"
			:show-action="false"
			 placeholder="请输入您想查询的运动"
				 @clear="clear"
				 @change="searchValue">
			</u-search>
		</view>
		<view class="tabsView" v-if="tabsShow">
			<u-tabs font-size="30rpx" bar-width="80" active-color="#2EA7E0" :list="list" :is-scroll="true"
				:current="current" @change="change"></u-tabs>
		</view>
		<view class="foodView">
			<block v-for="(item,idx) in foodlList" :key="idx">
				<view class="weui-flex foodb">
					<view>
						<view class="placeholder">
							<image class="foodImage" :src="item.sportImageUrl"></image>
						</view>
					</view>
					<view class="weui-flex__item">
						<view class="placeholder">
							<view class="foodTitle ellipsis">
								{{item.dataSportName}} <text v-show="item.alias"
									style="color: #9B9B9B;">（{{item.alias}}）</text>
							</view>
							<view class="frigorie">
								{{item.heatQuantity}}千卡/小时
							</view>
						</view>
					</view>
					<view>
						<view class="placeholder">
							<view class="addView" @tap="addtap('ydklist',item)">
							</view>
						</view>
					</view>
				</view>
			</block>
			<view style="height: 50upx;">
			</view>
		</view>
		<view class="formStyle weui-flex">
			<view class="weui-flex__item">
				<view class="placeholder sumUp">
					已选：{{selectedArr.length}} 总消耗：{{allConsume}}千卡
				</view>
			</view>
			<view >
				<view class="placeholder">
					<button type="default" @tap.stop="formfh" class="formBtn">提交</button>
				</view>
			</view>
		</view>
		<!-- ref="exercise"  :mode="'exercise'" :ifForm="false" @cancel="radioChange" -->
		<selecta ref="ydklist" yundongys="yd" :typePage="1" @switchTime="switchTime" @formFood="formFood" :checkedData="checkedData"
			:timeValue="value1==''||endTime==value1?'今日':value1.replace(/-/g,'.')" @scrollLeftNow="scrollLeftNow">
		</selecta>
		<lb-picker ref="picker1" v-model="value1" :format="curFormat" display-format="YYYY-MM-DD-HH-mm-ss" mode="dateSelector"  @change="handleChange" @confirm="handleConfirm"
			@cancel="handleCancel" start-date="2021-1-1" :end-date="endTime">
		</lb-picker>
	</view>
</template>

<script>
	import dayjs from '@/common/utils/day/day.js'
	import selecta from '@/pages/subpackage/components/lb-picker/select'
	import lbPicker  from '@/pages/subpackage/components/lb-picker/index'

import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			uSearch,
			uTabs,
			lbPicker,
			selecta
		},
		data() {
			return {
				curFormat: 'YYYY-MM-DD HH:mm:ss',
				pageCurrent:1,//页数
				selectedArr: [], //已选择Arr
				allConsume: 0, //总消耗
				endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                selectTime: '',
				classid: 1,
				pageSize: 10, //加载条数
				current: 0,
				list: [], //tabList
				tabsShow: true, //选择方式切换
				indicId: '', //指标id
				scrollLeftNowa: '', //食物克数
				value1: '',
				checkedData: {}, //控件数据
				foodlList: [],
				keyword: '',
			}
		},
		onLoad(e) {
			this.indicId = e.indicId;
			this.listPage('', 1, 100)
		},
		onShow() {
			this.getByClassifyId(this.classid, '', 1, this.pageSize, true)
		},
		methods: {
			formfh(){
				uni.navigateBack({
					delta: 1
				});
			},
			listPageyd(keyword,pageCurrent,pageSize,concatBr){
				let _this = this;
				this.$api.get(global.apiUrls.listPageyd+ '?keyword=' + keyword +
						'&pageCurrent=' + pageCurrent+'&pageSize='+pageSize, {})
					.then(res => {
						if(res.data.code == 1000){
							if(concatBr){//搜索
								let records =res.data.result?res.data.result.records:[] ;
								_this.foodlList =records
							}else{//分页触发
								let records =res.data.result?res.data.result.records:[] ;
								_this.foodlList =_this.foodlList.concat(records)
							}

						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
			},
			onReachBottom : function() { //分页加载
				if(this.keyword == ''){//tab分页
					this.getByClassifyId(this.classid,'',this.pageCurrent+=1,this.pageSize,false)
				}else{//搜索分页
					this.listPageyd(this.keyword,this.pageCurrent+=1,this.pageSize,false)
				}
			},
			change(index) {
				this.current = index;
				let list = this.list,
					classid;
				this.classid = list[index].sportClassifyId;
				this.getByClassifyId(this.classid, '', 1, this.pageSize, true)
			},
			// 获取运动详情
			getByClassifyId(classId, keyword, pageCurrent, pageSize, concatBr) {
				let _this = this;
				this.$api.get(global.apiUrls.getByClassifyId + classId + '?keyword=' + keyword +
						'&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							if (concatBr) { //切换分类
								_this.foodlList = records
							} else { //触底分页
								_this.foodlList = _this.foodlList.concat(records);
							}
						} else {

						}
					})
			},
			// 获取运动分类
			listPage(keyword, pageCurrent, pageSize) {
				let _this = this;
				this.$api.get(global.apiUrls.listPage + '?keyword=' + keyword + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							for (let i = 0; i < records.length; i++) {
								records[i].name = records[i].sportClassifyName
							}
							_this.list = records

						}
					})
			},
			scrollLeftNow(e) {
				this.scrollLeftNowa = e
			},
			formFood(e) {
				if (e.type == 'yd') {
                    console.info(e.consume,"e.consume----》")
					this.userSport(e.consume, e.dataSportId, e.sliderValue)
				}
			},
			userSport(consume, dataSportId, sliderValue) {
				let _this = this,
					fdata = {
						heatQuantity: consume, //消耗热量
						indicId: this.indicId, //
						recordTime:this.value1 == ''?dayjs().format('YYYY-MM-DD'):dayjs(this.value1).format('YYYY-MM-DD'),
						createTime:this.value1==''?dayjs().format('YYYY-MM-DD HH:mm:ss'):this.value1,
						sportId: dataSportId, //运动id
						sportTimeLen: sliderValue, //时长
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					},
					isRepea = false;
				// return
				this.$api.post(global.apiUrls.userSport, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: res.data.message,
							duration: 2000
						});
                        console.info(_this.value1,"_this.value1")
                         console.info( _this.endTime," _this.endTime")
						if (_this.value1 == '' || _this.value1 == _this.selectTime) {
							_this.allConsume += consume //同一天添加千卡
						}
						for (let i = 0; i < _this.selectedArr.length; i++) {
							if (_this.selectedArr[i] == dataSportId) {
								isRepea = true;
								break;
							}
						}
						if (!isRepea) { //未重复
							_this.selectedArr.push(dataSportId)
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				}).catch(err => {})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
                this.selectTime = e.value;
			},
			handleConfirm(e) {
				this.$refs['ydklist'].ydShow()
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			switchTime(e) {
				console.log(e)
				this.$refs['picker1'].show()
			},
			addtap(name, item) {
				this.checkedData = item
				this.$refs[name].ydShow()
			},
			searchValue(e) {
				this.keyword = e;//动态绑定
				if (e != '') {
					this.tabsShow = false
					this.listPageyd(e,this.classid,this.pageCurrent,this.pageSize,true)
				} else {
					this.tabsShow = true;
					this.getByClassifyId(this.classid, '', 1, this.pageSize, true)
				}
			},
			clear(){
				this.tabsShow = true;
				this.getByClassifyId(this.classid, '', 1, this.pageSize, true)
			},
		}
	}
</script>

<style lang="scss">
	@import "./exercise.scss"
</style>
